<template>
    <view class="page">
        <view class="context">
            <view class="context-context">
                <view class="mb2">{{ $t('留言') }}</view>
                <view>
                    <custom-textarea 
                        v-model="context"
                        :maxlength="16383" 
                        placeholder="请输入讨论留言">
                    </custom-textarea>
                </view>
            </view>
            <view class="context-header">
                <view class="identifylabelids">
                    <view @click="popupref2?.open()" class="open">
                        <view>
                            {{ $t('通知人：') }}
                        </view>
                        <view>
                            <uv-icon name="arrow-right"></uv-icon>
                        </view>
                    </view>
                    <view class="identifylabelids-button">
                        <view v-for="( v, i ) in  users" :key="i" class="identifylabelids-button-item">
                            <uv-tags bgColor="#FF746F" borderColor="#FF746F" color="#ffffff" closable :text="v.name"
                                @close="users?.splice(i, 1)">
                            </uv-tags>
                        </view>
                    </view>
                </view>
            </view>
            <view class="context-context">
                <view class="context-title">
                    {{ $t('图片及视频') }}
                </view>
                <view>
                    <uploadfile v-model="image" accept="media" @delete="deleteresultsFile"></uploadfile>
                </view>
            </view>
            <view class="context-context">
                <view class="botton">
                    <uv-button @click="submit" :custom-style="submitButton">{{ $t('提交') }}</uv-button>
                </view>
            </view>
            <uni-popup :closeable="true" :safeAreaInsetTop="true" ref="popupref2" type="bottom">
                <view class="popuplabel ">
                    <selectuser @close="() => popupref2.close()" v-model="users" multiple></selectuser>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'
import selectuser from '@/components/user/selectuser.vue';
import api from '@/api';
import { submitButton } from '@/util/style';
import { useI18n } from 'vue-i18n';
import uploadfile from '../../components/uploadfile.vue';
import CustomTextarea from '@/components/custom-textarea.vue';
const image = ref<any[]>([])
const id = ref()
const users = ref<Eps.UserInfoEntity[]>([])
const context = ref()

onLoad((query) => {
    id.value = query?.id
})
const popupref2 = ref()
const $t = useI18n().t
function submit() {
    if (!context.value) {
        uni.showToast({
            title: $t('请填写留言'),
            duration: 2000,
            icon: 'error'
        });
        return
    }
    let text = users.value.map(e => {
        return '@' + e.name
    }).join(' ')
    text = text ? text + ' ' : ''
    api('/wechat/commentuser/add', {
        users: users.value,
        comment: {
            id: id.value
        },
        context: text + context.value,
        image: image.value
    }).then(e => {
        uni.showToast({
            title: $t('回复成功'),
            duration: 2000,
        });
        uni.navigateBack()
    }).catch(f => {
        uni.showToast({
            title: $t('回复失败'),
            duration: 2000,
            icon: 'error'
        });
    })
}
function deleteresultsFile(c: { name: string, index: number }) {
    image.value.splice(c.index, 1)
}
</script>


<style scoped lang="scss">
.context {
    display: flex;
    flex-direction: column;
    width: 100%;

    background-color: $uni-bg-def1;

    .identifylabelids {

        .open {
            display: flex;
            flex-wrap: wrap;
            padding-top: 12rpx;
            padding-bottom: 12rpx;
            padding-left: 36rpx;
            padding-right: 36rpx;
            justify-content: space-between;
            border-bottom: 1px solid #E6E6E6;
            background-color: $uni-text-color-inverse;
        }

        .identifylabelids-button {
            min-height: 160rpx;
            display: flex;
            flex-wrap: wrap;
            padding-top: 12rpx;
            padding-bottom: 12rpx;
            padding-left: 36rpx;
            padding-right: 36rpx;
            background-color: $uni-text-color-inverse;

            .identifylabelids-button-item {
                flex: none;
            }

        }
    }

    .context-context {
        background-color: $uni-text-color-inverse;
        padding: 36rpx;

        .botton {
            display: flex;
            justify-content: center
        }
    }

}

.popuplabel {
    height: 90vh;
    overflow-y: scroll;
    background-color: $uni-bg-color;
}
</style>